<script setup name="music-list">
import { reactive, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { playlistDetail, allPlaylist } from '@/services/home'
import { formatSongs, formartNum } from '@/utils/util'
import { Search, PlayOne, ShareTwo, Message, DocAdd, DownloadTwo, ListAdd, Play } from '@icon-park/vue-next'
import { usePlayStore } from '@/stores'

import IconPark from '@/components/common/IconPark.vue'
import Header from '@/components/common/Header.vue'
import MusicCell from '@/components/common/MusicCell.vue'

const info = reactive({
  id: '',
  playlist: [],
  creatorlist: {},
  total: 0,
  coverImg: '',
  playCount: 0,
  shareCount: 0,
  commentCount: 0,
  subscribedCount: 0,
  playlistName: '',
  description: ''
})

const initData = async id => {
  const { playlist, privileges } = await playlistDetail(id)
  Object.assign(info, {
    // 歌单图片
    coverImg: playlist.coverImgUrl,
    // 播放量
    playCount: playlist.playCount,
    // 歌单创作者信息
    creatorlist: playlist.creator,
    // 分享数量
    shareCount: playlist.shareCount,
    // 评论数
    commentCount: playlist.commentCount,
    // 订阅数
    subscribedCount: playlist.subscribedCount,
    // 歌单名
    playlistName: playlist.name,
    // 简介
    description: playlist.description,
    // 歌单总条目数
    total: playlist.trackCount,
    playlist: formatSongs(playlist.tracks, privileges)
  })
}

const list = ref([])
const loading = ref(false)
const finished = ref(false)
const playStore = usePlayStore()

onMounted(() => {
  info.id = useRoute().query.id
  Promise.all([initData({ id: useRoute().query.id }), onLoad()])
})

const onLoad = async () => await loadData(info.id)

const loadData = async id => {
  loading.value = true
  const res = await allPlaylist({ id, limit: 30, offset: list.value.length })
  const filteredSongs = formatSongs(res.songs, res.privileges)
  list.value.push(...filteredSongs)
  loading.value = false
  if (res.songs.length === 0) finished.value = true
}

// 播放全部歌曲
const playAll = () => {
  // 过滤出非VIP的歌曲
  const nonVipSongs = list.value.filter(song => !song.vip)
  // 设置播放列表为非VIP歌曲
  playStore.setPlaylist(nonVipSongs)
  // 设置播放状态为开始
  playStore.setPlayStatus(false)
  // 打开音乐详情弹框
  playStore.changeMusicDialog(true)
}
</script>

<template>
  <div class="music-list">
    <div class="misic-bg" :style="{ background: `url(${info.creatorlist?.backgroundUrl})` }">
    </div>
    <Header :title="info?.playlistName" defaultStr="歌单" :scrollTopNum="60">
      <template #right>
        <IconPark :icon="Search" :strokeWidth="2" :size="6" />
      </template>

      <template #content>
        <van-row gutter="24" justify="center">
          <van-col span="8" class="content-cover">
            <span class="content-cover-playCount">
              <IconPark :icon="PlayOne" theme="filled" :size="3" />
              {{ formartNum(info.playCount) }}
            </span>
            <van-image class="content-cover-sheet" radius="10px" :src="`${info.coverImg}?param=120y120`" />
          </van-col>

          <van-col span="16" class="content-info">
            <van-text-ellipsis class="content-info-title" :content="info.playlistName" rows="2" />
            <div class="content-info-author">
              <van-image width="12%" height="12%" :src="info.creatorlist?.avatarUrl" round :lazy-load="true" />
              <span class="content-info-nickname">{{ info.creatorlist?.nickname }}</span>
              <van-button icon="plus" size="mini" round class="transparentBtn">关注</van-button>
            </div>
            <div class="content-info-describe">
              <van-text-ellipsis :content="info.description" rows="1" expand-text="展开" collapse-text="收起" />
            </div>
          </van-col>
        </van-row>

        <van-row gutter="24" justify="space-between">
          <van-col span="24" class="content-actions">
            <van-button round class="transparentBtn">
              <div class="content-actions-btn">
                <IconPark :icon="ShareTwo" :strokeWidth="2" :size="6" theme="filled" :fill="['#59677d', '#fff']" />
                <span>{{ formartNum(info.shareCount) }}</span>
              </div>
            </van-button>
            <van-button round class="transparentBtn">
              <div class="content-actions-btn">
                <IconPark :icon="Message" :strokeWidth="0" :size="7" theme="two-tone" :fill="['#59677d', '#fff']" />
                <span>{{ formartNum(info.commentCount) }}</span>
              </div>
            </van-button>
            <van-button round color="#ff3534">
              <div class="content-actions-btn">
                <IconPark :icon="DocAdd" :strokeWidth="2" :size="7" theme="two-tone" :fill="['#ff3534', '#fff']" />
                <span>{{ formartNum(info.subscribedCount) }}</span>
              </div>
            </van-button>
          </van-col>
          <van-back-top right="44px" bottom="60px" />
        </van-row>
      </template>
    </Header>

    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <MusicCell :list="list">
        <template #radius>
          <van-cell :border="false" class="radius">
            <template #title>
              <div class="radius-playall" @click="playAll">
                <IconPark :icon="Play" :size="6" theme="filled" fill="#fe3a39" />
                <span class="radius-playall-total">
                  播放全部
                  <span>({{ info.total }})</span>
                </span>
              </div>
            </template>

            <template #default>
              <div class="radius-playaction">
                <IconPark :icon="DownloadTwo" :size="6" />
                <IconPark :icon="ListAdd" :size="6" />
              </div>
            </template>
          </van-cell>
        </template>
      </MusicCell>
    </van-list>
  </div>
</template>

<style scoped lang="scss">
.misic-bg {
  position: absolute;
  width: 100%;
  height: 40%;
  top: 0;
  right: 0;
  filter: blur(16px);
  z-index: -1;
}
</style>
